<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树洞详情 - 心声社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4A6FFF;
            --primary-light: #E8EEFF;
            --secondary: #FF6B6B;
            --dark: #2D3436;
            --gray: #636E72;
            --light-gray: #F1F5F8;
            --border: #DFE6E9;
            --radius: 8px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark);
            background-color: #F8FAFC;
            line-height: 1.6;
            padding-top: 1.5rem;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 900px;
        }
        
        .back-link {
            color: var(--gray);
            text-decoration: none;
            margin-bottom: 1rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.2s ease;
        }
        
        .back-link:hover {
            color: var(--primary);
        }
        
        .card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .card-body {
            padding: 1.5rem;
        }
        
        /* 树洞内容样式 */
        .treehole-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .active-tag {
            display: inline-block;
            padding: 0.15rem 0.5rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        .post-meta {
            font-size: 0.9rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .treehole-content {
            margin-bottom: 1.5rem;
            font-size: 1.05rem;
            line-height: 1.8;
        }
        
        .image-container {
            margin-bottom: 1.5rem;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        
        .multi-image {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .multi-image img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .tag-container {
            margin-bottom: 1.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .tag {
            padding: 0.35rem 0.85rem;
            background-color: var(--light-gray);
            color: var(--dark);
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .tag:hover {
            background-color: var(--primary-light);
            color: var(--primary);
            cursor: pointer;
        }
        
        .treehole-actions {
            display: flex;
            justify-content: space-around;
            padding: 1rem 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.5rem;
        }
        
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
            color: var(--gray);
            background: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
            border-radius: var(--radius);
        }
        
        .action-btn:hover {
            background-color: var(--light-gray);
            color: var(--primary);
        }
        
        .action-btn i {
            font-size: 1.25rem;
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        /* 评论区样式 */
        .comments-section {
            margin-top: 2rem;
        }
        
        .section-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .comment-form {
            margin-bottom: 2rem;
        }
        
        .form-group {
            margin-bottom: 1rem;
        }
        
        .comment-input {
            width: 100%;
            padding: 1rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 1rem;
            resize: none;
            transition: all 0.3s ease;
            min-height: 100px;
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(74, 111, 255, 0.1);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .btn {
            padding: 0.6rem 1.25rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #3A5FE8;
        }
        
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .comment-item {
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-author {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .comment-content {
            margin-bottom: 0.75rem;
            line-height: 1.7;
        }
        
        .comment-actions {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
        }
        
        .comment-action {
            color: var(--gray);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            transition: color 0.2s ease;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .comment-action.liked {
            color: var(--secondary);
        }
        
        /* 回复样式 */
        .replies-list {
            margin-top: 1rem;
            margin-left: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .reply-item {
            padding: 0.75rem;
            background-color: var(--light-gray);
            border-radius: var(--radius);
        }
        
        .reply-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .reply-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .reply-author {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .reply-time {
            font-size: 0.75rem;
            color: var(--gray);
        }
        
        .reply-content {
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        
        .reply-actions {
            display: flex;
            gap: 1rem;
            font-size: 0.85rem;
        }
        
        .reply-form {
            margin-top: 1rem;
            display: flex;
            gap: 0.75rem;
        }
        
        .reply-input {
            flex: 1;
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        
        .reply-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(74, 111, 255, 0.1);
        }
        
        .reply-btn {
            padding: 0.5rem 1rem;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        .reply-btn:hover {
            background-color: #3A5FE8;
        }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-item {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.95rem;
        }
        
        .page-item:not(.active):not(.disabled):hover {
            background-color: var(--light-gray);
            color: var(--primary);
        }
        
        .page-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        .page-item.disabled {
            color: var(--border);
            cursor: not-allowed;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .multi-image img {
                height: 150px;
            }
            
            .treehole-actions {
                flex-wrap: wrap;
            }
            
            .action-btn {
                flex: 1;
            }
            
            .replies-list {
                margin-left: 1.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .card-body {
                padding: 1rem;
            }
            
            .multi-image {
                grid-template-columns: 1fr;
            }
            
            .multi-image img {
                height: 200px;
            }
            
            .action-btn span {
                font-size: 0.85rem;
            }
            
            .comment-actions {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 返回链接 -->
        <a href="#" class="back-link">
            <i class="fas fa-arrow-left"></i> 返回树洞广场
        </a>
        
        <!-- 树洞详情卡片 -->
        <div class="card">
            <div class="card-body">
                <!-- 作者信息 -->
                <div class="treehole-header">
                    <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">
                            城市夜行者
                            <span class="active-tag">活跃</span>
                        </div>
                        <div class="post-meta">
                            <span><i class="far fa-clock"></i> 2023年10月15日 23:45</span>
                            <span><i class="far fa-eye"></i> 1,254 浏览</span>
                        </div>
                    </div>
                </div>
                
                <!-- 树洞内容 -->
                <div class="treehole-content">
                    <p>加班到深夜，走在回家的路上，看着窗外的城市灯火，突然有很多感触。</p>
                    <p>这个城市很大，大到能容纳下所有人的梦想；这个城市也很小，小到每个人都在孤独地奋斗。</p>
                    <p>不知道有多少人和我一样，在深夜的街头徘徊，思考着人生的方向。虽然辛苦，但每次看到清晨的阳光，又会觉得一切都值得。</p>
                    <p>生活或许就是这样，在迷茫中寻找方向，在疲惫中坚持前行。</p>
                </div>
                
                <!-- 图片内容 -->
                <div class="image-container">
                    <img src="https://picsum.photos/seed/tree1/1200/600" alt="城市夜景" class="single-image">
                </div>
                
                <!-- 标签 -->
                <div class="tag-container">
                    <div class="tag">职场</div>
                    <div class="tag">生活感悟</div>
                    <div class="tag">城市</div>
                    <div class="tag">深夜</div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="treehole-actions">
                    <button class="action-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>342 点赞</span>
                    </button>
                    <button class="action-btn">
                        <i class="far fa-comment"></i>
                        <span>87 评论</span>
                    </button>
                    <button class="action-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                    <button class="action-btn">
                        <i class="far fa-share-alt"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn">
                        <i class="far fa-flag"></i>
                        <span>举报</span>
                    </button>
                </div>
                
                <!-- 分享面板 -->
                <div class="share-panel" style="display: none; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--light-gray); border-radius: var(--radius);">
                    <div class="filter-title">
                        <i class="fas fa-share-alt"></i> 分享到
                    </div>
                    <div class="filter-options">
                        <div class="filter-tag">微信好友</div>
                        <div class="filter-tag">朋友圈</div>
                        <div class="filter-tag">微博</div>
                        <div class="filter-tag">QQ好友</div>
                        <div class="filter-tag">复制链接</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 评论区 -->
        <div class="comments-section">
            <h3 class="section-title">
                <i class="fas fa-comments"></i> 评论 (87)
            </h3>
            
            <!-- 评论输入框 -->
            <div class="card comment-form">
                <div class="card-body">
                    <div class="form-group">
                        <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                    </div>
                    <div class="form-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-paper-plane"></i> 发表评论
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="comments-list">
                <!-- 评论1 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/seed/user2/100/100" alt="评论者头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">旅行者日记</div>
                            <div class="comment-time">2小时前</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        深有同感，我也经常加班到深夜，每次看到城市的夜景都会有很多感慨。但生活就是这样，为了自己的目标努力奋斗，总有一天会看到回报的。
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action liked">
                            <i class="fas fa-heart"></i> 45
                        </a>
                        <a href="#" class="comment-action reply-toggle">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                    
                    <!-- 回复框 -->
                    <div class="reply-form" style="display: none;">
                        <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                        <input type="text" class="reply-input" placeholder="回复 @旅行者日记...">
                        <button class="reply-btn">回复</button>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <div class="reply-header">
                                <img src="https://picsum.photos/seed/user1/100/100" alt="回复者头像" class="reply-avatar">
                                <div>
                                    <div class="reply-author">城市夜行者 <span style="color: var(--gray); font-weight: normal;">回复</span> 旅行者日记</div>
                                    <div class="reply-time">1小时前</div>
                                </div>
                            </div>
                            <div class="reply-content">
                                谢谢你的鼓励，确实，只要坚持下去，总会有收获的一天。
                            </div>
                            <div class="reply-actions">
                                <a href="#" class="comment-action">
                                    <i class="far fa-heart"></i> 12
                                </a>
                                <a href="#" class="comment-action reply-toggle">
                                    <i class="far fa-reply"></i> 回复
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论2 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/seed/user3/100/100" alt="评论者头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">职场新人</div>
                            <div class="comment-time">5小时前</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        我也是刚刚入职不久，每天都加班到很晚，感觉压力好大。有时候真的想放弃，但看到你的分享，又觉得自己不是一个人在奋斗。
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action">
                            <i class="far fa-heart"></i> 28
                        </a>
                        <a href="#" class="comment-action reply-toggle">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                    
                    <!-- 回复框 -->
                    <div class="reply-form" style="display: none;">
                        <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                        <input type="text" class="reply-input" placeholder="回复 @职场新人...">
                        <button class="reply-btn">回复</button>
                    </div>
                </div>
                
                <!-- 评论3 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/seed/user4/100/100" alt="评论者头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">深夜独白</div>
                            <div class="comment-time">昨天 23:12</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        深夜真的是容易让人思考人生的时刻，我也经常在深夜失眠，思考自己的人生方向。你的照片拍得真好，城市的夜景总是那么迷人又孤独。
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action liked">
                            <i class="fas fa-heart"></i> 36
                        </a>
                        <a href="#" class="comment-action reply-toggle">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                    
                    <!-- 回复框 -->
                    <div class="reply-form" style="display: none;">
                        <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                        <input type="text" class="reply-input" placeholder="回复 @深夜独白...">
                        <button class="reply-btn">回复</button>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <div class="reply-header">
                                <img src="https://picsum.photos/seed/user5/100/100" alt="回复者头像" class="reply-avatar">
                                <div>
                                    <div class="reply-author">城市观察者 <span style="color: var(--gray); font-weight: normal;">回复</span> 深夜独白</div>
                                    <div class="reply-time">昨天 23:45</div>
                                </div>
                            </div>
                            <div class="reply-content">
                                我也很喜欢拍城市的夜景，不同的时间、不同的角度，总能拍出不一样的感觉。
                            </div>
                            <div class="reply-actions">
                                <a href="#" class="comment-action">
                                    <i class="far fa-heart"></i> 8
                                </a>
                                <a href="#" class="comment-action reply-toggle">
                                    <i class="far fa-reply"></i> 回复
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论4 -->
                <div class="comment-item">
                    <div class="comment-header">
                        <img src="https://picsum.photos/seed/user6/100/100" alt="评论者头像" class="comment-avatar">
                        <div>
                            <div class="comment-author">美食爱好者</div>
                            <div class="comment-time">2天前</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        加班晚了可以奖励自己一顿好吃的，我每次加班晚了都会去吃点东西，感觉能缓解一天的疲惫。生活再忙也要照顾好自己呀！
                    </div>
                    <div class="comment-actions">
                        <a href="#" class="comment-action">
                            <i class="far fa-heart"></i> 19
                        </a>
                        <a href="#" class="comment-action reply-toggle">
                            <i class="far fa-reply"></i> 回复
                        </a>
                    </div>
                    
                    <!-- 回复框 -->
                    <div class="reply-form" style="display: none;">
                        <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                        <input type="text" class="reply-input" placeholder="回复 @美食爱好者...">
                        <button class="reply-btn">回复</button>
                    </div>
                </div>
            </div>
            
            <!-- 评论分页 -->
            <div class="pagination-container">
                <div class="pagination">
                    <div class="page-item disabled">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="page-item active">1</div>
                    <div class="page-item">2</div>
                    <div class="page-item">3</div>
                    <div class="page-item">4</div>
                    <div class="page-item">5</div>
                    <div class="page-item">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn:has(.far.fa-heart), .action-btn:has(.fas.fa-heart), .comment-action:has(.far.fa-heart), .comment-action:has(.fas.fa-heart)');
            
            likeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const icon = this.querySelector('i');
                    let countText = this.textContent.trim().split(' ').pop();
                    let count = parseInt(countText) || 0;
                    
                    if (icon.classList.contains('far')) {
                        // 变为已点赞状态
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        // 更新点赞数
                        if (!isNaN(count)) {
                            this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                        }
                    } else {
                        // 变为未点赞状态
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        // 更新点赞数
                        if (!isNaN(count)) {
                            this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                        }
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn:has(.far.fa-bookmark), .action-btn:has(.fas.fa-bookmark)');
            
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        // 变为已收藏状态
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                        alert('已收藏该树洞');
                    } else {
                        // 变为未收藏状态
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                        alert('已取消收藏');
                    }
                });
            });
            
            // 分享功能
            const shareButton = document.querySelector('.action-btn:has(.far.fa-share-alt)');
            const sharePanel = document.querySelector('.share-panel');
            
            shareButton.addEventListener('click', function() {
                sharePanel.style.display = sharePanel.style.display === 'none' ? 'block' : 'none';
            });
            
            // 回复功能
            const replyToggles = document.querySelectorAll('.reply-toggle');
            
            replyToggles.forEach(toggle => {
                toggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    const commentItem = this.closest('.comment-item, .reply-item');
                    const replyForm = commentItem.querySelector('.reply-form');
                    
                    // 隐藏其他所有回复框
                    document.querySelectorAll('.reply-form').forEach(form => {
                        if (form !== replyForm) {
                            form.style.display = 'none';
                        }
                    });
                    
                    // 切换当前回复框显示状态
                    replyForm.style.display = replyForm.style.display === 'none' ? 'flex' : 'none';
                    
                    // 如果显示，则聚焦输入框
                    if (replyForm.style.display === 'flex') {
                        replyForm.querySelector('.reply-input').focus();
                    }
                });
            });
            
            // 回复提交
            const replyButtons = document.querySelectorAll('.reply-btn');
            
            replyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const replyForm = this.closest('.reply-form');
                    const replyInput = replyForm.querySelector('.reply-input');
                    const replyText = replyInput.value.trim();
                    
                    if (replyText) {
                        const commentItem = this.closest('.comment-item');
                        const repliesList = commentItem.querySelector('.replies-list') || 
                                           commentItem.appendChild(document.createElement('div'));
                        
                        // 如果回复列表不存在，则创建
                        if (!commentItem.querySelector('.replies-list')) {
                            repliesList.className = 'replies-list';
                            commentItem.appendChild(repliesList);
                        }
                        
                        // 创建新回复元素
                        const newReply = document.createElement('div');
                        newReply.className = 'reply-item';
                        newReply.innerHTML = `
                            <div class="reply-header">
                                <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                                <div>
                                    <div class="reply-author">我 <span style="color: var(--gray); font-weight: normal;">回复</span> ${this.closest('.comment-item').querySelector('.comment-author').textContent}</div>
                                    <div class="reply-time">刚刚</div>
                                </div>
                            </div>
                            <div class="reply-content">
                                ${replyText}
                            </div>
                            <div class="reply-actions">
                                <a href="#" class="comment-action">
                                    <i class="far fa-heart"></i> 0
                                </a>
                                <a href="#" class="comment-action reply-toggle">
                                    <i class="far fa-reply"></i> 回复
                                </a>
                            </div>
                        `;
                        
                        // 添加新回复到列表顶部
                        repliesList.prepend(newReply);
                        
                        // 清空输入框并隐藏回复框
                        replyInput.value = '';
                        replyForm.style.display = 'none';
                        
                        // 为新回复绑定事件
                        bindReplyEvents(newReply);
                    }
                });
            });
            
            // 评论提交
            const commentButton = document.querySelector('.comment-form .btn-primary');
            const commentInput = document.querySelector('.comment-input');
            
            commentButton.addEventListener('click', function() {
                const commentText = commentInput.value.trim();
                
                if (commentText) {
                    const commentsList = document.querySelector('.comments-list');
                    
                    // 创建新评论元素
                    const newComment = document.createElement('div');
                    newComment.className = 'comment-item';
                    newComment.innerHTML = `
                        <div class="comment-header">
                            <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="comment-avatar">
                            <div>
                                <div class="comment-author">我</div>
                                <div class="comment-time">刚刚</div>
                            </div>
                        </div>
                        <div class="comment-content">
                            ${commentText}
                        </div>
                        <div class="comment-actions">
                            <a href="#" class="comment-action">
                                <i class="far fa-heart"></i> 0
                            </a>
                            <a href="#" class="comment-action reply-toggle">
                                <i class="far fa-reply"></i> 回复
                            </a>
                        </div>
                        <!-- 回复框 -->
                        <div class="reply-form" style="display: none;">
                            <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                            <input type="text" class="reply-input" placeholder="回复 @我...">
                            <button class="reply-btn">回复</button>
                        </div>
                    `;
                    
                    // 添加新评论到列表顶部
                    commentsList.prepend(newComment);
                    
                    // 清空输入框
                    commentInput.value = '';
                    
                    // 更新评论计数
                    updateCommentCount(1);
                    
                    // 为新评论绑定事件
                    bindCommentEvents(newComment);
                }
            });
            
            // 分页功能
            const pageItems = document.querySelectorAll('.page-item:not(.disabled)');
            
            pageItems.forEach(item => {
                if (!item.classList.contains('disabled')) {
                    item.addEventListener('click', function() {
                        if (!this.innerHTML.includes('chevron')) { // 不是箭头按钮
                            pageItems.forEach(i => i.classList.remove('active'));
                            this.classList.add('active');
                        }
                    });
                }
            });
            
            // 辅助函数：绑定评论事件
            function bindCommentEvents(commentElement) {
                // 绑定点赞事件
                const likeButton = commentElement.querySelector('.comment-action:has(.far.fa-heart)');
                if (likeButton) {
                    likeButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        const icon = this.querySelector('i');
                        let countText = this.textContent.trim().split(' ').pop();
                        let count = parseInt(countText) || 0;
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('liked');
                            this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('liked');
                            this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                        }
                    });
                }
                
                // 绑定回复事件
                const replyToggle = commentElement.querySelector('.reply-toggle');
                if (replyToggle) {
                    replyToggle.addEventListener('click', function(e) {
                        e.preventDefault();
                        const replyForm = commentElement.querySelector('.reply-form');
                        
                        // 隐藏其他所有回复框
                        document.querySelectorAll('.reply-form').forEach(form => {
                            if (form !== replyForm) {
                                form.style.display = 'none';
                            }
                        });
                        
                        // 切换当前回复框显示状态
                        replyForm.style.display = replyForm.style.display === 'none' ? 'flex' : 'none';
                        
                        // 如果显示，则聚焦输入框
                        if (replyForm.style.display === 'flex') {
                            replyForm.querySelector('.reply-input').focus();
                        }
                    });
                }
                
                // 绑定回复提交事件
                const replyButton = commentElement.querySelector('.reply-btn');
                if (replyButton) {
                    replyButton.addEventListener('click', function() {
                        const replyForm = this.closest('.reply-form');
                        const replyInput = replyForm.querySelector('.reply-input');
                        const replyText = replyInput.value.trim();
                        
                        if (replyText) {
                            let repliesList = commentElement.querySelector('.replies-list');
                            if (!repliesList) {
                                repliesList = document.createElement('div');
                                repliesList.className = 'replies-list';
                                commentElement.appendChild(repliesList);
                            }
                            
                            // 创建新回复元素
                            const newReply = document.createElement('div');
                            newReply.className = 'reply-item';
                            newReply.innerHTML = `
                                <div class="reply-header">
                                    <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                                    <div>
                                        <div class="reply-author">我 <span style="color: var(--gray); font-weight: normal;">回复</span> 我</div>
                                        <div class="reply-time">刚刚</div>
                                    </div>
                                </div>
                                <div class="reply-content">
                                    ${replyText}
                                </div>
                                <div class="reply-actions">
                                    <a href="#" class="comment-action">
                                        <i class="far fa-heart"></i> 0
                                    </a>
                                    <a href="#" class="comment-action reply-toggle">
                                        <i class="far fa-reply"></i> 回复
                                    </a>
                                </div>
                            `;
                            
                            repliesList.prepend(newReply);
                            replyInput.value = '';
                            replyForm.style.display = 'none';
                            
                            // 为新回复绑定事件
                            bindReplyEvents(newReply);
                        }
                    });
                }
            }
            
            // 辅助函数：绑定回复事件
            function bindReplyEvents(replyElement) {
                // 绑定点赞事件
                const likeButton = replyElement.querySelector('.comment-action:has(.far.fa-heart)');
                if (likeButton) {
                    likeButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        const icon = this.querySelector('i');
                        let countText = this.textContent.trim().split(' ').pop();
                        let count = parseInt(countText) || 0;
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('liked');
                            this.innerHTML = `<i class="fas fa-heart"></i> ${count + 1}`;
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('liked');
                            this.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
                        }
                    });
                }
                
                // 绑定回复事件
                const replyToggle = replyElement.querySelector('.reply-toggle');
                if (replyToggle) {
                    replyToggle.addEventListener('click', function(e) {
                        e.preventDefault();
                        const commentItem = this.closest('.comment-item');
                        const existingReplyForm = commentItem.querySelector('.reply-form');
                        
                        // 如果已有回复框，则移除
                        if (existingReplyForm) {
                            existingReplyForm.remove();
                        }
                        
                        // 创建新回复框
                        const replyForm = document.createElement('div');
                        replyForm.className = 'reply-form';
                        replyForm.style.display = 'flex';
                        replyForm.innerHTML = `
                            <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                            <input type="text" class="reply-input" placeholder="回复 @${replyElement.querySelector('.reply-author').textContent.split(' ')[0]}...">
                            <button class="reply-btn">回复</button>
                        `;
                        
                        replyElement.after(replyForm);
                        replyForm.querySelector('.reply-input').focus();
                        
                        // 绑定回复提交事件
                        replyForm.querySelector('.reply-btn').addEventListener('click', function() {
                            const replyInput = replyForm.querySelector('.reply-input');
                            const replyText = replyInput.value.trim();
                            
                            if (replyText) {
                                const repliesList = replyElement.parentElement;
                                
                                // 创建新回复元素
                                const newReply = document.createElement('div');
                                newReply.className = 'reply-item';
                                newReply.innerHTML = `
                                    <div class="reply-header">
                                        <img src="https://picsum.photos/seed/currentuser/100/100" alt="你的头像" class="reply-avatar">
                                        <div>
                                            <div class="reply-author">我 <span style="color: var(--gray); font-weight: normal;">回复</span> ${replyElement.querySelector('.reply-author').textContent.split(' ')[0]}</div>
                                            <div class="reply-time">刚刚</div>
                                        </div>
                                    </div>
                                    <div class="reply-content">
                                        ${replyText}
                                    </div>
                                    <div class="reply-actions">
                                        <a href="#" class="comment-action">
                                            <i class="far fa-heart"></i> 0
                                        </a>
                                        <a href="#" class="comment-action reply-toggle">
                                            <i class="far fa-reply"></i> 回复
                                        </a>
                                    </div>
                                `;
                                
                                repliesList.insertBefore(newReply, replyElement.nextSibling);
                                replyForm.remove();
                                
                                // 为新回复绑定事件
                                bindReplyEvents(newReply);
                            }
                        });
                    });
                }
            }
            
            // 辅助函数：更新评论计数
            function updateCommentCount(change) {
                const countElement = document.querySelector('.section-title');
                const currentCount = parseInt(countElement.textContent.match(/\d+/)[0]);
                countElement.innerHTML = `<i class="fas fa-comments"></i> 评论 (${currentCount + change})`;
                
                // 更新操作按钮的评论数
                const commentAction = document.querySelector('.action-btn:has(.far.fa-comment) span');
                const currentActionCount = parseInt(commentAction.textContent.match(/\d+/)[0]);
                commentAction.textContent = `${currentActionCount + change} 评论`;
            }
        });
    </script>
</body>
</html>
    
